<template>
  <div class="query-modal" @click.self="close">
    <div class="query-container">
      <el-card class="card">
        <div class="close-btn" @click="close">
          <el-icon><Close /></el-icon>
        </div>

        <h2 class="query-title">奖学金申请查询</h2>
        <el-form :model="form" ref="formRef" label-width="60px" size="small">
          <el-form-item
            label="学号"
            prop="studentId"
            :rules="[
              { required: true, message: '请输入学号', trigger: 'blur' },
              { pattern: /^\d+$/, message: '学号格式错误', trigger: 'blur' }
            ]"
          >
            <el-input v-model="form.studentId" placeholder="请输入学号" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery" :loading="loading">查询</el-button>
            <el-button @click="handleReset" :disabled="loading">重置</el-button>
          </el-form-item>
        </el-form>

        <el-alert
          v-if="errorMsg"
          :title="errorMsg"
          type="error"
          show-icon
          closable
          @close="errorMsg = ''"
          style="margin-top: 10px"
        />
      </el-card>
    </div>

    <el-dialog
      title="奖学金申请记录"
      v-model="resultDialogVisible"
      width="80%"
      :close-on-click-modal="true"
    >
      <el-table
        v-if="applicationsList && applicationsList.length > 0"
        :data="applicationsList"
        border
        style="width: 100%"
      >
       
        <el-table-column prop="id" label="申请ID" width="80" />
        <el-table-column prop="studentId" label="学号" width="100" />
        <el-table-column prop="year" label="评定年份" width="120" />
        <el-table-column prop="moralScore" label="思政得分" width="100" />
        <el-table-column prop="academicScore" label="学业得分" width="100" />
        <el-table-column prop="researchScore" label="科研得分" width="100" />
        <el-table-column prop="serviceScore" label="社会服务得分" width="120" />
        <el-table-column prop="totalScore" label="综合总分" width="100" />
        <el-table-column prop="result" label="评定结果" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.result === '通过' ? 'success' : 'danger'">
              {{ scope.row.result }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="申请时间" width="180" />
        <el-table-column prop="updatedAt" label="更新时间" width="180" />
      </el-table>
      <div v-else class="dialog-empty">
        <el-empty description="暂无奖学金申请记录" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage, ElIcon, ElDialog, ElTable, ElTableColumn, ElEmpty, ElTag } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import axios from 'axios'

export default {
  name: 'QuickQuery',
  components: { ElIcon, Close, ElDialog, ElTable, ElTableColumn, ElEmpty, ElTag },
  emits: ['close'],
  data() {
    return {
      form: {
        studentId: ''
      },
      loading: false,
      errorMsg: '',
      applicationsList: null,
      resultDialogVisible: false
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    handleReset() {
      this.form.studentId = ''
      this.errorMsg = ''
      this.applicationsList = null
      this.resultDialogVisible = false
    },
    async handleQuery() {
      this.errorMsg = ''
      this.applicationsList = null

      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return

        this.loading = true
        try {
        
          const res = await axios.get(`/api/scholarshipapplications/student/${this.form.studentId}`)
          
         
          this.applicationsList = res.data
          
          if (this.applicationsList && this.applicationsList.length > 0) {
            this.resultDialogVisible = true
            ElMessage.success('查询成功')
          } else {
            this.errorMsg = '未找到该学生的奖学金申请记录'
          }
        } catch (error) {
          this.errorMsg = '查询异常，请稍后重试'
          console.error('查询失败:', error)
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.query-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.query-container {
  width: 420px;
  position: relative;
}

.card {
  background: rgba(255, 255, 255, 0.95);
  padding: 30px;
}

.query-title {
  text-align: center;
  font-size: 20px;
  color: #1e3a8a;
  margin-bottom: 20px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
  color: #666;
}

.dialog-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style>